<template>
  <div class="index-top">
    <div class="logo">
      <img src="@/assets/images/index/ylogo.png" height="45" />
    </div>
    <transition name="slide-fade">
      <div v-if="showSearchInput" class="search">
        <input
          type="text"
          name="search"
          value=""
          placeholder="请输入您要搜索的关键词"
        />
        <button type="button" name="sear" class="sear">
          <img src="@/assets/images/index/search.png" />
        </button>
      </div>
    </transition>
    <span v-if="showTitle" class="title_ty">易凯商城·创造生活美学</span>
    <div :class="classStyle" @click="changeShowSearchInput"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showTitle: true,
      showSearchInput: false,
    };
  },
  computed: {
    classStyle() {
      let className = "btn-sou";
      if (this.showSearchInput) {
        className = "btn-sou__active";
      }
      return className;
    }
  },
  methods: {
    changeShowSearchInput() {
      this.showSearchInput = !this.showSearchInput;
      let _this = this
      if (this.showSearchInput) {
        this.showTitle = false
      } else {
        setTimeout(() => {
          _this.showTitle = true
        }, 2000);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s ease;
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  // transform: translateX(10px);
  opacity: 0;
}
.index-top {
  position: relative;
  height: 50px;
  padding: 0 7px;
  background: #ff6700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .logo {
    width: 50px;
    height: 50px;
    float: left;
    overflow: hidden;
  }
  .title_ty {
    height: 50px;
    line-height: 50px;
    color: #eee;
    font-size: 14px;
    font-family: "microsoft sans serif";
    transition: top 0.5s ease-in-out;
    -webkit-transition: top 0.5s ease-in-out;
  }
  .btn-sou {
    float: right;
    height: 50px;
    width: 50px;
    background-image: url(../../../../assets/images/index/search-close.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position-y: 0px;
    transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
  }
  .btn-sou__active {
    float: right;
    height: 50px;
    width: 50px;
    background-image: url(../../../../assets/images/index/search-close.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position-y: -50px;
    transition: 0.5s ease-in-out;
    -webkit-transition: 0.5s ease-in-out;
  }
  .search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: auto;
    margin: 0 5vw;
    text-indent: 5%;
    color: #999;
    border-radius: 30px;
    background: #eee;
    overflow: hidden;
    transition: all ease-in 2s;
    // transition: top .5s ease-in-out;
    // -webkit-transition: top .5s ease-in-out;
    margin-top: 0;
    input {
      float: left;
      width: 80%;
      height: 34px;
      padding: 0;
      border: none;
      outline: none;
      background: #eee;
      font-size: 13px;
      text-indent: 14px;
    }
    button {
      float: right;
      width: 35px;
      height: 35px;
      padding: 0;
      overflow: hidden;
      border: none;
    }
    img {
      width: 100%;
    }
  }
}
</style>
